<template>
    <div class="service-page" v-loading="data.loading">
         <el-tabs v-model="currentTab" :before-leave="beforeChangeTab">
             <el-tab-pane
                v-for="tab in tabList"
                :key="tab.key"
                :label="tab.name"
                :name="tab.key">
                <component :is="componentMap[tab.key]" :current-tab="currentTab" :institution-info="data.institutionInfo" @updateInstitution="getInstitutionInfo" @updateBrandId="updateBrandId"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import ApplicationWrap from './part/application/application.vue';
import InformationWrap from './part/base-info/information.vue';
import Navigation from './part/site-navigation/index.vue';
import TemplateSet from './part/template-set.vue';
import FuncSet from './part/func-set.vue';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

const store= useStore();

const route = useRoute();

let currentTab = ref('');

let data = reactive({
    institutionInfo: {},
    institutionState: 0, // 是否配置过站点基本信息 1配置过 0未配置 -1组织已删除
    loading: false
});

let tabList = ref([
    {
        name: '站点信息设置',
        key: 'information'
    },
    {
        name: '功能模块配置',
        key: 'func'
    },
    {
        name: '门户模版配置',
        key: 'template'
    },
    {
        name: '站点导航管理',
        key: 'navigation'
    }
    // {
    //     name: '站点应用授权',
    //     key: 'application'
    // }
]);

const componentMap = {
    'information': InformationWrap,
    'application': ApplicationWrap,
    'navigation': Navigation,
    'template': TemplateSet,
    'func': FuncSet
};

// institutionState等于1，才是配置了站点信息，才能进入其他tab
const beforeChangeTab = (activeName, oldActiveName) => {
    console.log(data.institutionState);
    if (data.institutionState !== 1 && data.institutionState !== '1' && activeName !== 'information') {
        store.dispatch('message', { message: '站点信息配置完成后，站点功能配置、门户模板管理、站点导航管理、站点应用配置才可点' });
        return false;
    }
    return true;
}

// 获取组织信息
const getInstitutionInfo = ( brandId = '' ) => {
    data.loading = true;
    store.dispatch('proxyAction', {
        name: 'getInstitutionInfo',
        queries: {
            id: route.query.id
        }
    }).then((res) => {
        data.institutionInfo = res.data || {};
        data.institutionInfo.brandId = brandId;
        console.log('brandId====', brandId);
        data.institutionState = res.data && res.data.institutionState ? res.data.institutionState : 0;
    }).finally(() => {
        console.log('执行没');
        currentTab.value = 'information';
        data.loading = false;
    })
}

// 更新品牌信息
function updateBrandId(brandId) {
   data.institutionInfo.brandId = brandId;
}

onMounted(() => {
    getInstitutionInfo();
})

</script>

<style lang="scss" scoped>
.service-page {
    min-height: calc(100vh - 200px);
    :deep(.el-tabs__item) {
        height: 48px;
        line-height: 48px;
    }
    :deep(.el-tabs__nav-wrap) {
        padding: 0px 20px;
    }
    :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
    }
    :deep(.el-tabs__content){
        padding: 20px 20px;
    }
}
</style>